<template>
  <el-card>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/stuWelcome' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>英语版块</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/englishList' }">英语角</el-breadcrumb-item>
    </el-breadcrumb>
    <!--    标题-->
    <div class="light">
      <h3>莴苣姑娘3</h3>
    </div>
    <div class="content">
      <p>Upon seeing Rapunzel, the Prince fell instantly in love with her. He said, "You are the most beautiful lady in the world." Rapunzel also lost her heart to the handsome prince. The two lovers met each other every night, hiding from the eyes of the witch.</p>
      <p>看到公主后，王子便立刻爱上了她。他说，“你是世界上最美丽的女人”。莴苣姑娘也爱上了英俊的王子。于是，这对恋人悄悄地避开女巫，每晚都见面约会。</p>
      <p>However one day, the witch found out about these secret meetings, cut off the hair of Rapunzel, and sent her to a desert. Then the witch dropped down the cut hair to the Prince, as he came to see Rapunzel. When the Prince climbed up the tower, holding the cut hair, the witch cast off the ladder sending the Prince crashing to the ground.</p>
      <p>然而有一天，巫婆发现了这个秘密，她很生气地剪掉莴苣姑娘的长发，把她送到了沙漠。当王子再来的时候，巫婆把剪下来的头发放了下去。当王子抓着剪下来的头发快爬上高塔后，巫婆将这个梯子推翻，王子狠狠地摔在地上。</p>
      <p>He fell heavily on the earth at the base of the tower and became blind. The Prince gained strength by wandering around the land in order to find Rapunzel, and finally met her in the heart of the desert. Rapunzel recognized the Prince at once. Upon realizing that the Prince had become blind, Rapunzel's eyes filled with tears, which trickled down into the eyes of the Prince.</p>
      <p>王子因严重的摔伤，变成了瞎子。王子为了寻找莴苣姑娘日夜奔波，最后发现她在沙漠的中心。莴苣姑娘立刻认出了王子。但是，看到王子变成了瞎子，她悲伤的流出了泪水，泪水滴到王子的眼睛上。</p>
      <p>At that moment, the Prince gained his eyesight again with the power of love. Then the two people returned to the royal palace and lived happily ever after.</p>
      <p>在那一刻，因为满含爱的泪水，王子的眼睛重见光明。之后，两人回到皇宫，过上了幸福的生活。</p>
    </div>
    <div class="light">
      <el-button type="primary" style="margin-top: 20px;" @click="complete">完成阅读</el-button>
    </div>
  </el-card>
</template>

<script>
  export default {
    methods:{
      complete(){
        this.$message({
          message:'恭喜您已完成本篇阅读！',
          type:"success"
        });
        // 跳转至EnglishList页面
        this.$router.replace("/englishList");
      }
    }
  }
</script>
<style scoped>
  .light{
    font-size: 30px;
    text-align: center;
    color: #fefefe;
    text-shadow: 0 0 0.5em #0ae642, 0 0 0.2em #5c5c5c;
    -webkit-animation: shine 2.4s infinite;/*设置动画*/
  }
  @-webkit-keyframes shine{/*创建动画*/
    0%,100%{ color:#fff;text-shadow:0 0 10px #f0d1f8,0 0 10px #0000FF; }
    50%{ text-shadow:0 0 10px #0000FF,0 0 40px #0ae642; }
  }
  .content{
    min-height:350px;
    overflow-y:auto;
    max-height:600px;
  }
  p{
    font-size: 18px;
    color: #fefefe;
    text-shadow:0px 1px 0px #d27878,
    0px 2px 0px #b0b0b0,
    0px 3px 0px #a0a0a0,
    0px 4px 0px #909090,
    0px 5px 10px rgba(0, 0, 0, .9);
  }
</style>
